<dstore-center-title>
  <span title i18n>Local App</span>
  <button routerLink="../local" routerLinkActive="active">
    <ng-container i18n>Local App</ng-container>
  </button>
  <button *ngIf="logged | async" routerLink="../remote" routerLinkActive="active">
    <ng-container i18n>Remote App</ng-container>
  </button>
</dstore-center-title>

<ng-template #loadingContainer>
  <div class="loadingContainer"><app-wait></app-wait></div>
</ng-template>
<div class="installed-list">
  <dstore-scrollbar>
    <ng-container *ngIf="(result$ | async)?.list as installedList; else loadingContainer">
      <ng-container *ngFor="let installed of installedList">
        <div class="installed-app">
          <ng-container *ngIf="installed.software as software; else noSoftwareRef">
            <img class="icon" dstoreCover="icon" [routerLink]="['/app', installed.name]" [src]="software.info.icon" />
            <div class="info">
              <span>{{ software.info.name }}</span>
              <span class="size">{{ installed.package.size | sizeHuman }}</span>
            </div>
          </ng-container>
          <ng-template #noSoftwareRef>
            <img class="icon" dstoreCover="icon" [routerLink]="['/app', installed.localName]" />
            <div class="info">
              <span>{{ installed.localName }}</span>
              <span class="size">{{ installed.package.size | sizeHuman }}</span>
            </div>
          </ng-template>

          <ng-container *ngIf="removingList$ | async as removingList">
            <div class="installed">
              <ng-template #confirm>
                <div class="confirm">
                  <ng-container i18n>Are you sure you want to uninstall this application?</ng-container>
                </div>
              </ng-template>
              <ng-container *ngIf="selected != installed.name; else confirm">
                <div class="time">
                  <span i18n>Date installed:</span>
                  {{ installed.package.installedTime * 1000 | date: 'yyyy-MM-dd' }}
                </div>
                <div class="version">
                  <span i18n>Version:</span>
                  <span class="versionText">{{ installed.package.localVersion }}</span>
                </div>
              </ng-container>
            </div>
            <div class="control">
              <ng-template #confirmBtn>
                <button (click)="selected = null" i18n>Cancel</button>
                <button class="primary" (click)="remove(installed.software || installed)">
                  <ng-container i18n>Confirm</ng-container>
                </button>
              </ng-template>
              <ng-container *ngIf="selected != installed.name; else confirmBtn">
                <ng-template #uninstall>
                  <button (click)="selected = installed.name" [disabled]="DisabledList.includes(installed.name)">
                    <ng-container i18n>Uninstall</ng-container>
                  </button>
                </ng-template>
                <button
                  *ngIf="removingList.includes(installed.name) || removing.includes(installed.name); else uninstall"
                  disabled
                >
                  <ng-container i18n>Uninstalling</ng-container>
                </button>
              </ng-container>
            </div>
          </ng-container>
        </div>
      </ng-container>
    </ng-container>
  </dstore-scrollbar>
</div>

<div class="paginatorContainer">
  <ng-container *ngIf="count$ | async as count">
    <app-paginator
      [hidden]="count <= 1"
      [count]="count"
      [pageIndex]="pageIndex$ | async"
      (pageIndexChange)="gotoPage($event)"
    ></app-paginator>
  </ng-container>
</div>
